<template>
    <div class="table-box" id="tableBox">
        <!-- 查询 -->
        <slot name="search" id="seachBox"></slot>
        <div class="table-wrap">
            <el-table :data="props.tableData" v-loading="props.isloading" @row-click="onRowClick" style="width: 100%" :max-height="maxHeight" :row-class-name="tableRowClassName"
                border>
                <!-- 是否可展开 -->
                <el-table-column v-if="props.expand" type="expand">
                    <template #default="scope">
                        <slot name="expand" :row="scope.row" />
                    </template>
                </el-table-column>
                <!-- 序号 -->
                <el-table-column type="index" label="序号" :index="indexMethod" width="80" align="center" />

                <!-- 动态列 -->
                <el-table-column v-for="item in props.tableColumn" :prop="item.prop" :label="item.label" align="center"
                    :width="item.width">

                    <!-- 列的内容插槽 -->
                    <template v-if="item.slot" #default="scope">
                        <slot :name="item.prop" :row="scope.row" />
                    </template>

                    <!-- 二级表头 -->
                    <template v-if="item.children && item.children.length > 0">
                        <el-table-column v-for="child in item.children" :prop="child.prop" :label="child.label"
                            align="center" />
                    </template>
                </el-table-column>


            </el-table>
        </div>
        <el-pagination class="paginStyle" v-model:current-page="paginOption.pagenum"  v-model:page-size="paginOption.pagesize"
            :page-sizes="props.size" :background="true" layout="prev, pager, next,sizes,total" :total="props.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>

<script setup>
const props = defineProps({
    tableColumn: {
        type: Array,
        default: () => {
            return []
        }
    },
    params: {
        type: Object,
        default: () => {
            return {}
        }
    },
    expand: {
        type: Boolean,
        default: false
    },
    tableData: {
        type: Array,
        default: () => {
            return []
        }
    },
    paginOption: {
        type: Object,
        default: () => {
            return {}
        }
    },
    maxHeight:{
        type:String,
        default:"600"
    },
    size:{
        type:Array,
        default:()=>([10,20,30])
    },
    isloading:{
        type:Boolean,
        default:false
    },
    total:{
        type:Number,
        default:0
    },
})

const emit = defineEmits(['paginChange','rowClick'])
function indexMethod(index) {
    return index + 1
}

const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 == 0) {
        return ''
    } else {
        return 'hasBg'
    }
}
function handleSizeChange(size) {
    emit('paginChange', { type: 'size', size })
}
function handleCurrentChange(size) {
    emit('paginChange', { type: 'page', size })
}
function onRowClick(row) {
    emit('rowClick',row)
}


//计算最大高度
function computedHeight() {
    maxHeight.value = document.getElementById('tableBox').clientHeight - document.querySelectorAll('.form-box')[0].clientHeight - 60
}
const maxHeight = ref(600)
onMounted(()=>{
    window.addEventListener('resize',computedHeight)   
})
onUnmounted(() => {
    window.removeEventListener('resize', computedHeight)
})

defineExpose({
    computedHeight
})

</script>

<style>
.table-box {
    position: relative;
    height: 100%;
}

.table-wrap {

    /* max-height: 700px; */
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(31, 197, 242, 1);
}

.el-table .hasBg {
    --el-table-tr-bg-color: rgba(242, 251, 254, 1);
}
.rowClick .el-table__row {
    cursor: pointer;
}

.el-table th.el-table__cell {
    background: rgba(84, 199, 244, 0.5);
    box-shadow: inset -1px 0px 0px rgba(31, 197, 242, 1);
    border-right: rgba(84, 199, 244, 0.5);
    border-bottom: 1px solid rgba(84, 199, 244, 0.5);
    color: rgba(51, 51, 51, 1);
}

.el-table thead.is-group th.el-table__cell {
    background: rgba(84, 199, 244, 0.5);
    box-shadow: inset -1px 0px 0px rgba(31, 197, 242, 1);
}

.el-table--border .el-table__cell {
    border: 0;
}


.el-pagination button {
    border-radius: 4px;
}

.el-pagination ul>li {
    border-radius: 4px;
}


.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
</style>